import React, { Component } from "react";
import { connect } from "dva";
import Ellipsis from "@/components/Ellipsis";
import { maxLength } from "@/utils/form";
import { REGION_ADDRESS_TYPE, REGION_TYPE, SERVICE_STATUS } from "@/Constants";
import { NAME_RULE, CODE_RULE } from "@/Constants/rules";
import {
  Menu,
  Dropdown,
  Button,
  Icon,
  message,
  Card,
  Form,
  Modal,
  Input,
  Tree,
  Transfer,
  Switch,
} from "antd";
import PageHeaderWrapper from "@/components/PageHeaderWrapper";
import MyIcon from "@/components/MyIcon";
import { trim, treeIcon } from "@/utils/utils";
import styles from "./Transfer.less";
import api from "@/api";

var platformid = 5;
var parentUserId = 0;
const FormItem = Form.Item;
const { TreeNode } = Tree;
var ar11;
var right = [];
let targetKeys = [];
let mockData = [];
var data;

@connect(({ role, usergroups, org }) => ({
  sysRoots: usergroups.sysRoots,
  roleList: role.roleList,
  roleUserList: role.roleUserList,
  userGroupsMenuList: usergroups.userGroupsMenuList,
  orgUsers: org.orgUsers,
  roleIdss: role.roleIdss,
  newroleIdss: role.newroleIdss,
  userIdss: role.userIdss,
  keyIdss: role.keyIdss,
  direction: role.direction,
}))
@Form.create()
class UserTransfer extends React.Component {
  state = {
    mockData: [],
    targetKeys: [],
    queryMembersByRole: "",
    userId: [],
  };

  componentDidMount() {
    this.getMock();
  }

  getMock = () => {
    const { list } = this.props.roleUserList;
    console.log(list);
    const { dispatch } = this.props;
    mockData = [];
    targetKeys = [];
    for (let i = 0; i < list.length; i++) {
      data = {
        key: list[i].userId,
        name: list[i].name,
        // roleId: list[i].roleId,
        // userId: list[i].userId,
      };
      targetKeys.push(data.key);

      mockData.push(data);
      right.push(data);
    }
    console.log(right);
    this.setState({ mockData, targetKeys }, () => {
      console.log(this.state.targetKeys);
    });
    // mockData.splice(0, mockData.length);
  };

  filterOption = (inputValue, option) => option.name.indexOf(inputValue) > -1;

  handleChange = (targetKeys, direction, moveKeys) => {
    const { dispatch } = this.props;
    this.setState({ targetKeys, direction });
    console.log(targetKeys, moveKeys);

    dispatch({
      type: "role/changeUserIdss",
      payload: {
        id: moveKeys,
      },
    });
    dispatch({
      type: "role/changedirection",
      payload: {
        id: direction,
      },
    });
  };

  handleSearch = (dir, value) => {
    console.log("search:", dir, value);
  };

  handleMenuClick = (e) => {
    const { dispatch, roleList, newroleIdss } = this.props;
    console.log(roleList);
    console.log(e);

    var ww = roleList[e.key.slice(5) - 1].roleId;
    console.log(ww);

    this.queryMembersByRole(ww);
    dispatch({
      type: "role/changeNewRoleId",
      payload: {
        id: ww,
      },
    });
    console.log(ww);
  };

  queryMembersByRole = (roleId) => {
    const { dispatch } = this.props;
    return dispatch({
      type: "role/queryMembersByRole",
      payload: {
        data: {
          platform: platformid,
          roleId,
          parentUserId: parentUserId,
        },
      },
    }).then((res) => {
      const { resultList } = res.data.querySysUserDto;
      console.log(resultList);
      let a = resultList.map((item) => {
        item.key = item.userId;
        return item;
      });
      console.log(a);
      console.log(mockData);
      console.log(targetKeys);
      if (mockData.length - targetKeys.length == 0) {
        mockData.splice(targetKeys.length, a.length);
      } else {
        mockData.splice(targetKeys.length, mockData.length - targetKeys.length);
      }

      console.log(mockData);
      for (var i = 0; i < a.length; i++) {
        mockData.push(a[i]);
      }
      console.log(mockData);
      this.setState(
        {
          mockData: mockData,
          targetKeys: this.state.targetKeys,
        },
        () => {
          console.log(mockData);
          console.log(this.state.targetKeys);
        }
      );
    });
  };

  renderTree = () => {
    const { roleList } = this.props;

    return (
      <Menu
        className={styles.menu}
        selectedKeys={[this.state.currentRoleId]}
        onClick={this.handleMenuClick}
        mode="inline"
      >
        <div className={styles.select}>分组列表</div>
        {roleList.map((role) => {
          return role.roleId == this.props.roleIdss ? (
            <Menu.Item disabled>
              <span>{role.roleName}</span>
              <span>{"(" + role.userCount + ")"}</span>
            </Menu.Item>
          ) : (
            <Menu.Item>
              <span>{role.roleName}</span>
              <span>{"(" + role.userCount + ")"}</span>
            </Menu.Item>
          );
        })}
      </Menu>
    );
  };

  renderTransfer = () => {
    return (
      <Transfer
        dataSource={this.state.mockData}
        showSearch
        filterOption={this.filterOption}
        targetKeys={this.state.targetKeys}
        onChange={this.handleChange}
        onSearch={this.handleSearch}
        render={(item) => item.name}
        // titles={['左边动态', '右边默认']}
        // titles={this.getTitle}
      />
    );
  };

  render() {
    return (
      <div className={styles.addUsers}>
        <Card className={styles.tree} bordered={false}>
          {this.renderTree()}
        </Card>
        <Card className={styles.transfer} bordered={false}>
          {this.renderTransfer()}
        </Card>
      </div>
    );
  }
}

export default UserTransfer;
